<template>
	<div>
		<div class="vs-table-box" v-loading="loading">
			<el-form label-position="right" ref="ruleForm" :rules="rules" class="vs--info" label-width="110px" :model="ruleForm">
				<div v-for="(item, i) in ruleForm.projects" :key="i">
					<h3>项目信息{{ i + 1 }}</h3>
					<el-form-item label="项目名称" :rules="{ required: true, message: '请选择项目', trigger: 'change' }" :prop="'projects.' + i + '.project_id'">
						<el-select v-model="item.project_id" filterable placeholder="请选择">
							<el-option v-for="val in projectList" :key="val.id" :label="val.name" :value="val.id"> </el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="房间号" :rules="{ required: true, message: '请选择房间号', trigger: 'change' }" :prop="'projects.' + i + '.room_id'">
						<el-select v-model="item.room_id" filterable placeholder="请选择">
							<el-option v-for="val in roomList" :key="val.id" :label="val.room_number" :value="val.id"> </el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="床位号" :rules="{ required: true, message: '请选择床位号', trigger: 'change' }" :prop="'projects.' + i + '.bed_id'">
						<el-select v-model="item.bed_id" filterable placeholder="请选择">
							<el-option v-for="val in bedList(item)" :key="val.id" :label="val.number" :value="val.id"> </el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="性别" :rules="{ required: true, message: '请选择性别', trigger: 'change' }" :prop="'projects.' + i + '.gender'">
						<el-radio-group size="small" v-model="item.gender">
							<el-radio :label="1">男</el-radio>
							<el-radio :label="2">女</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="服务技师" :rules="{ required: true, message: '请选择服务技师', trigger: 'change' }" :prop="'projects.' + i + '.staff_id'">
						<el-select v-model="item.staff_id" filterable placeholder="请选择">
							<el-option v-for="val in techList" :key="val.id" :label="val.staff_name" :value="val.staff_id"> </el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="排种类型" :rules="{ required: true, message: '请选择排种类型', trigger: 'change' }" :prop="'projects.' + i + '.staff_type'">
						<el-select v-model="item.staff_type" filterable placeholder="请选择">
							<el-option label="轮钟" :value="1"> </el-option>
							<el-option label="点钟" :value="2"> </el-option>
							<el-option label="加班1轮钟" :value="3"> </el-option>
							<el-option label="加班1点钟" :value="4"> </el-option>
							<el-option label="加班2轮钟" :value="5"> </el-option>
							<el-option label="加班2点钟" :value="6"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="" prop="asd">
						<el-button @click="ruleForm.projects.push({ room_id: '', bed_id: '', gender: '', staff_id: '', staff_type: 2 })" type="primary">+新增项目信息</el-button>
						<el-button v-if="i != 0" @click="ruleForm.projects.splice(i, 1)" type="danger">删除</el-button>
					</el-form-item>
				</div>
				<el-form-item label="商品系列：" prop="username">
					<el-table :data="ruleForm.skus">
						<el-table-column prop="title" label="商品系列"></el-table-column>
						<el-table-column label="规格名" min-width="150">
							<template slot-scope="scope">
								{{ scope.row.sku_text }}
							</template>
						</el-table-column>
						<el-table-column prop="sale_price" label="标准价"></el-table-column>
						<el-table-column label="金额">
							<template slot-scope="scope">
								{{ (scope.row.sale_price * scope.row.number).toFixed(2) }}
							</template>
						</el-table-column>
						<el-table-column label="数量">
							<template slot-scope="scope">
								<el-input-number v-model="scope.row.number" :step="1" step-strictly size="mini" :min="1" :max="scope.row.stock"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作">
							<template slot-scope="scope">
								<span class="tab-red-text" @click="ruleForm.skus.splice(scope.$index, 1)">删除</span>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="" prop="asd">
					<el-button @click="dialogVisible = true" type="primary">+购买商品</el-button>
				</el-form-item>
			</el-form>
			<div class="vs-bottom-btns">
				<el-button @click="utils.backPage()">取消</el-button>
				<el-button @click="submit(0)" type="info">暂存</el-button>
				<el-button @click="submit(1)" type="primary">确认开单</el-button>
			</div>
		</div>
		<el-dialog title="购买商品" :visible.sync="dialogVisible" :before-close="handleClose" width="850px">
			<el-form ref="dialog" :model="dialogGoods">
				<el-form-item label="商品：" prop="goods_id">
					<el-select v-model="dialogGoods.value" clearable filterable @change="changeGoods" multiple placeholder="请选择">
						<el-option v-for="item in goodsList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品规格：" prop="username">
					<el-table ref="sku" :data="dialogGoods.sku" style="width: 800px">
						<el-table-column width="70px" :selectable="checkboxSelect" type="selection"></el-table-column>
						<el-table-column prop="title" label="商品系列"></el-table-column>
						<el-table-column label="规格名" min-width="150">
							<template slot-scope="scope">
								{{ scope.row.sku_text }}
							</template>
						</el-table-column>
						<el-table-column prop="sale_price" label="标准价"></el-table-column>
						<!-- <el-table-column label="金额">
                        <template slot-scope="scope">
                            {{scope.row.sale_price * scope.row.number}}
                        </template>
                    </el-table-column> -->
						<el-table-column label=" " width="140">
							<template slot-scope="scope">
								<!-- <el-input-number size="mini" :min="1" :max="Number(scope.row.stock)" v-model="scope.row.number" :step="1" step-strictly></el-input-number> -->
								<el-alert v-if="!scope.row.stock" title="库存不足" center type="error" :closable="false"> </el-alert>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose()">取 消</el-button>
				<el-button type="primary" @click="addGoods">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				dialogVisible2: false,
				loading: false,
				tableData: [],
				isBtn: false,
				ruleForm: {
					user_id: '', //	预约单的用户id
					reserve_id: '', //预约单id
					projects: [],
					skus: [],
					status: 0,
				},
				dialogGoods: {
					value: '',
					sku: [],
				},
				dataList: [],
				user: '',
				projectList: [],
				roomList: [],
				techList: [],
				goodsList: [],
				ints: -1,
				rules: {
					name: { required: true, message: '请输入顾客姓名', trigger: 'blur' },
					gender: { required: true, message: '请选择性别', trigger: 'change' },
					mobile: { required: true, message: '请输入手机', trigger: 'blur' },
					mode: { required: true, message: '请选择预约方式', trigger: 'change' },
					date: { required: true, message: '请选择日期', trigger: 'blur' },
					time: { required: true, message: '请选择时间', trigger: 'blur' },
					advance_amount: { required: true, message: '请输入预付金额', trigger: 'blur' },
					number: { required: true, message: '请输入预约人数', trigger: 'blur' },
				},
			};
		},
		created() {
			let { title, id, user_id, out_trade_no } = this.$route.query;
			if (title) this.$route.meta.title = title;
			this.ruleForm.reserve_id = id;
			this.ruleForm.user_id = user_id;
			if (out_trade_no) {
				this.getOrders(out_trade_no);
			} else if (id) {
				this.getReserve();
			}
			this.getTech();
			this.getProject();
			this.getGoods();
			this.changeProj();
		},
		methods: {
			checkboxSelect(row, rowIndex) {
				for (let j of this.ruleForm.skus) {
					if (row.id == j.id) {
						return false;
					}
				}
				return row.stock;
			},
			addGoods() {
				this.ruleForm.skus.push(JSON.parse(JSON.stringify(this.$refs.sku.store.states.selection)));
				this.handleClose();
			},
			async getGoods() {
				let { code, data } = await this.$Http.getGoods({ is_all: 1, is_store: 1 });
				if (code) {
					this.goodsList = data;
				}
			},
			changeGoods(e) {
				let list = [];
				this.goodsList.filter((v) => {
					for (let val of e) {
						if (val == v.id) {
							v.sku.forEach((v2) => {
								v2.number = 1;
								v2.title = v.title;
								// 暂
							});
							list.push(...v.sku);
						}
					}
				});
				this.dialogGoods.sku = list;
			},
			submit(type) {
				this.$refs['ruleForm'].validate(async (valid) => {
					if (!valid) return;
					let obj = Object.assign({}, this.ruleForm);
					console.log(obj.projects, 'obj.projects');
					obj.projects.forEach((v) => {
						v.project_id += '';
						v.id = v.project_id;
					});
					obj.projects = JSON.stringify(obj.projects);
					obj.skus = JSON.stringify(
						obj.skus.map((v) => {
							return {
								sku_id: v.id,
								number: v.number,
							};
						})
					);
					obj.status = type;
					let { code, data } = await this.$Http.billReserve(obj);
					if (code) {
						this.utils.backPage();
						this.$message.success(type ? '开单成功' : '已暂存');
					}
				});
			},
			bedList(item) {
				let obj = this.roomList.find((v) => v.id == item.room_id);
				if (obj) return obj.beds;
				return [];
			},
			async changeProj(e, item) {
				// item.room_id = "";
				// item.bed_id = "";
				let { code, data } = await this.$Http.getNowFreeBed({
					// date:this.$moment().format('YYYY-MM-DD'),
					// time:this.$moment().format('HH:mm:ss'),
					project_ids: e + '',
				});
				if (code) {
					this.roomList = data;
				}
			},
			async getTech() {
				let { code, data } = await this.$Http.getTech();
				if (code) {
					this.techList = data;
				}
			},
			async getProject() {
				let { code, data } = await this.$Http.getProject();
				if (code) {
					this.projectList = data.data;
				}
			},
			async getOrders(out_trade_no) {
				//订单详情
				this.loading = true;
				let { code, data } = await this.$Http.getOrders({ is_market: 0, out_trade_no });
				this.loading = false;
				if (code) {
					data = data.data.length ? data.data[0] : {};
					data.project.forEach((v) => {
						v.project_id = v.project.id;
					});
					this.ruleForm.projects = data.project;
					this.ruleForm.skus = data.goods.map((v) => {
						v.title = v.goods_name;
						v.id = v.sku_id;
						return v;
					});
					console.log(this.ruleForm, 'this.ruleForm');
					let res = await this.$Http.getFreeBed({
						date: this.$moment().format('YYYY-MM-DD'),
						time: this.$moment().format('HH:mm:ss'),
						project_ids: data.project[0].project_id + '',
					});
					if (res.code) {
						this.roomList = res.data;
					}
				}
			},
			async getReserve() {
				//开单详情
				this.loading = true;
				let { code, data } = await this.$Http.getReserveInfo({ id: this.ruleForm.reserve_id });
				this.loading = false;
				if (code) {
					data.forEach((v) => {
						v.project_id *= 1;
						if (!v.staff_id) v.staff_id = '';
						if (!v.staff_type) v.staff_type = 2;
					});
					this.ruleForm.projects = data;
					console.log(this.ruleForm, 'this.ruleForm');
					let res = await this.$Http.getFreeBed({
						date: this.$moment().format('YYYY-MM-DD'),
						time: this.$moment().format('HH:mm:ss'),
						project_ids: data[0].project_id + '',
					});
					if (res.code) {
						this.roomList = res.data;
					}
				}
			},
			handleClose(dom) {
				dom && dom();
				this.dialogVisible = false;
				this.dialogGoods = this.$options.data().dialogGoods;
			},
			setAd() {},
		},
	};
</script>
<style lang="scss" scoped>
	.el-input {
		width: 200px;
	}
	::v-deep {
		.asdws {
			.el-form-item__content {
				flex: 1;
			}
		}
	}
</style>
